<template>
	<view class="display column agreementAre">
		<view class="display flow agreementItemAre" v-for="(item,index) in dataList" :key="index">
			<view @click="checkClick(index)">
				<uni-icons class="icon" :type="'checkbox-filled'" :color="themeColor" size="16" v-if="item.isCheck"/>
				<uni-icons class="icon" :type="'circle'" :color="'grey'" size="16" v-else/>
			</view>
			<text style="margin-left: 15rpx;" class="pColor fontHide" @click='textClick(index)'>{{item.text}}</text>
		</view>
		<uni-popup ref="showagreement" :type="popType" @change="change">
			<agreementText ref="agreementText" @cancel="cancel"></agreementText>
		</uni-popup>
	</view>
</template>

<script>
	import agreementText from '@/components/agreementText.vue'
	export default {
		components: {agreementText},
		props: ['type'],
		data() {
			return {
				isCheck: true,
				dataList: [],
				popType: '',
				themeColor: this.global.themeColor
			};
		},
		created() {
			if(!this.type) return
			let dataList = []
			switch (Number(this.type)){
				case 1:
					dataList = [
						{
							isCheck: true,
							text: `${this.global.companyName}商城用户服务协议及隐私政策`,
							isClick: true
						}
					]
					break;
				case 2:
					dataList = [
						{
							isCheck: true,
							text: `我同意在${this.global.companyName}商城开设店铺`,
							isClick: false
						},
						{
							isCheck: true,
							text: `${this.global.companyName}商城店名及店铺信息发布规则`,
							isClick: true
						},
						{
							isCheck: true,
							text: `${this.global.companyName}商城平台服务、结算服务协议`,
							isClick: true
						}
					]
					break;
				case 3:
					dataList = [
						{
							isCheck: true,
							text: `${this.global.companyName}商城供应商管理规范`,
							isClick: true
						},
						{
							isCheck: true,
							text: `${this.global.companyName}商城保证金保障服务协议`,
							isClick: true
						}
					]
					break;
			}
			this.dataList = dataList
		},
		methods:{
			checkClick(index){
				this.dataList[index].isCheck = !this.dataList[index].isCheck
				this.$emit('check',this.dataList)
			},
			textClick(index){
				// console.log(index);
				if(this.dataList[index].isClick){
					this.$refs.agreementText.list = this.dataList[index]
					this.$refs.agreementText.getData()
					this.togglePopup('center', 'agreement')
				}
			},
			togglePopup(type, open) {
				this.popType = type
				this.$nextTick(() => {
					this.$refs['show' + open].open()
				})
			},
			cancel(type) {
				this.$refs['show' + type].close()
			},
			change(e) {
				console.log('是否打开:' + e.show)
			},
		}
	}
</script>

<style lang="scss">
	.agreementAre{
		@include width;
		.agreementItemAre{
			@include width;
			@include justify-content('s');
			@include margin(10rpx,'top');
		}
	}
</style>
